<template>
  <van-sticky>
    <!-- 3.切换tab展示对应页面，并高亮展示对应tab -->
    <van-tabs
      v-model:active="active"
      title-inactive-color="#fff"
      color="#fff"
      title-active-color="#fff"
      background="#545252"
    >
      <van-tab title="新品上市" to="/home"></van-tab>
      <van-tab title="专属服务" to="/zss"></van-tab>
      <van-tab title="热销推荐" to="/rx"></van-tab>
    </van-tabs>
  </van-sticky>

  <!-- 7.实现从详情页返回列表页时，tab切换到离开列表页时的状态 -->
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>
<script setup>
import { ref } from "vue";

const active = ref(0);
</script>
<style lang="scss">
.van-tab {
  font-size: 17px !important;
}
</style>
